<template>
  <div>App组件</div>
  <!-- {{ msg }} -->
  <button @click="hClick($event)">点击显示位置</button>
  <hr />
  <img
    ref="flower"
    src="https://p1.itc.cn/images01/20220704/a4b9ad5174fa4d74b625a733ea46fcfd.jpeg"
    alt=""
  />
  <hr />
  <button @click="hGetFlower">点击获取图片</button>
</template>
  
<script setup lang="ts">
import { ref } from 'vue';
// const msg=ref<string>('你好')

// 设置一个引用数据类型的数据

const list = ref<
  {
    id: number;
    name: string;
    done: boolean;
  }[]
>([
  { id: 1, name: '李华', done: false },
  { id: 1, name: '梨花', done: true },
]);
// let obj=list.value[0]
// list.value=[]
// 开发中更建议使用ref来定义变量
// 如果使用reactive更新数据时需要注意丢失响应式的问题

// 计算属性=>在绝大部分场景下都不需要手动指定类型，会自动推导
/* const leftCount=computed<number>(()=>{
  return list.value.filter(item=>!item.done).length
}) */

// 事件类型
const hClick = (e: PointerEvent) => {
  // console.log(e)//查看事件对象的类型
  console.log(e.pageX, e.pageY);
};
// DOM中的ref
const img = document.createElement('img');
const flower = ref<HTMLImageElement | null>(null);
const hGetFlower = () => {
  // 获取图片没问题
  // console.log(flower.value)
  // 新增需求：点击后修改图片地址
  // if(flower.value){
  //   flower.value.src=''
  // }
// 新增需求：获取图片地址 
// 优雅 
// console.log(flower.value&&flower.value.src)
// 更优雅 
// ?. 可选链操作符 
// ?. 可以让我们不需要确定每个属性是否真的有值,如果中间某个环节没有值,整个表达式返回undefined 
// console.log(flower.value?.src)//不怎么会报错,没有就返回undefined

// 非空断言 (慎用) 百分百确定有值的时候采用
console.log(flower.value!.src)//会报错,如果没有也强行启用
};

/* type TodoList = {
  id: number;
  name: string;
  done: boolean;
}[];
const list = ref<TodoList>([
  { id: 1, name: '李华', done: false },
  { id: 1, name: '梨花', done: true },
]);

list.value[0].done; */
</script>

<style scoped>
img {
  height: 300px;
}
</style>
